<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<!-- <CustomNavbar /> -->
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>

		<!-- 搜索栏 -->
		<!-- 	<view class="searchContentOut">
			<view class="searchContent">
				<input type="text" value="111" class="searchInput" />
				<view class="searchBg">
					<image src="../../../static/gongzuotai/sousuo@2x.png" class="searchImg" mode=""></image>
				</view>
			</view>
		</view> -->
		<searchInput :inputcontent="inputcontent" @sendData="getInputValue" id="main"></searchInput>


		<!-- 筛选栏 -->
<!--		<view class="searchPickerContent" id="main">

			<view class="searchPickerContentBg">
				<text class="searchPickerText">部门</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

			<view class="searchPickerContentBg">
				<text class="searchPickerText">状态</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

		</view>-->

		<scroll-view scroll-y="true" class="listDataOut" :style="'height:'+scrollViewHeight+'px'">

			<view class="listDataOutInner">

				<!-- 列表数据 -->


				<view class="listDataInner" v-for="(item,index) in listData">

					<view class="listDataInnerTop">
						<view class="listDataInnerTopLeft">
							<image class="listDataInnerTopLeftImg" :src="apiUrl+item.imgs" mode=""></image>
						</view>
						<view class="listDataInnerTopRight">
							<text class="listDataInnerTopRightText">款号 {{item.itemCode}}</text>
							<text class="listDataInnerTopRightText">款名 {{item.itemName}}</text>
<!--							<text class="listDataInnerTopRightText">日期</text>-->
							<text class="listDataInnerTopRightText">单位 {{item.unit}}</text>
						</view>
					</view>


					<view class="listDataInnerBottom">
						<text @click="updateData(item)" class="listDataInnerBottomTextBlack">修改</text>
<!--						<text class="listDataInnerBottomTextBlack">录工价</text>-->
<!--						<text class="listDataInnerBottomTextBlack">同步工价</text>-->
						<text class="listDataInnerBottomTextRed">删除</text>
					</view>


				</view>



			</view>

		</scroll-view>


		<view class="loginContent" id="mainBottom">

			<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'

	import searchInput from '@/components/searchInput.vue'
  import config from "@/pages/api/config";
	import {

		getNumberManager,
		deleteNumberManager

	} from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},
		data() {
			return {
				inputcontent: '款号',
				login: '加款',

				title: '款式管理',
				isback: true,

				listData: [],
				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				queryData: {
					storeId: '',
					tenantId: ''
				},
        apiUrl: config.apiUrl
			}
		},
		onShow() {
			// 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.__data__.isRefresh) {
				// 重新获取数据
				console.log('获取数据');

				this.reUpload()
				// 每一次需要清除，否则会参数会缓存
				currPage.__data__.isRefresh = false
			}
		},

		onLoad: function() {
			const app = getApp();
			this.queryData.storeId = app.globalData.storeId
			this.queryData.tenantId = app.globalData.tenantId
			this.onLoads();
		},
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top


			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop - 50

			}).exec();



		},
		methods: {
			// 重置数据
			reUpload() {
				// 重置数据
				this.listData = []
				// 表示自动刷新本页
				this.onLoads()
			},
			onLoads() {
				getNumberManager(this.queryData).then(res => {
					if (res.code == 200) {
						this.listData = res.rows
					}
				})
			},
			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
        this.queryData.codeAndName = e
        this.onLoads()
			},
			// 新增
			AddData() {
				uni.navigateTo({
					url: '/subPack/styleManagement/styleManagementAdd/styleManagementAdd',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 修改
			updateData(item) {
				uni.navigateTo({
					url: '/subPack/styleManagement/styleManagementUpdate/styleManagementUpdate?id=' +
						encodeURIComponent(JSON.stringify(item.id)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}

		}
	}
</script>

<style>
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;

		bottom: 10rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;



		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;


		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}



	.listDataInnerBottomTextRed {

		width: 142rpx;
		height: 60rpx;
		background: #ECF5FD;
		border-radius: 16rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FF4E00;

		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.listDataInnerBottomTextBlack {
		width: 142rpx;
		height: 60rpx;
		background: #ECF5FD;
		border-radius: 16rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #0081FF;
		text-align: center;

		display: flex;
		align-items: center;
		justify-content: center;

	}

	.listDataInnerBottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: row;
		margin-top: 30rpx;
		width: 100%;
	}


	.listDataInnerTopRightText {
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.listDataInnerTopRight {
		display: flex;
		flex-direction: column;
		align-items: left;


		margin-top: 30rpx;
	}

	.listDataInnerTopLeft {
		width: 190rpx;
		height: 190rpx;
		background: #ECF5FD;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		margin-right: 30rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.listDataInnerTopLeftImg {
		width: 188rpx;
		height: 148rpx;

	}

	.listDataInnerTop {
		display: flex;
		flex-direction: row;

		display: flex;
		justify-content: left;
		width: 100%;
		/* background: #0AE1C6; */


	}

	.listDataOutInner {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.listDataOut {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 750rpx;
		margin-top: 30rpx;
		height: 800rpx;
		border-radius: 30rpx;

		margin-bottom: 30rpx;


	}

	.listDataInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 340rpx;
		background: #FFFFFF;
		border-radius: 30rpx;


		margin-bottom: 30rpx;
	}



	.searchPickerText {

		margin-left: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;

	}

	.searchPickerImg {
		width: 20rpx;
		height: 10rpx;
		margin-right: 20rpx;

	}

	.searchPickerContentBg {
		width: 330rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	.searchPickerContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;



	}







	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}
</style>
